<template>
    <div class="demo-basic">
        <section>
            <h3>用法</h3>
            <pre>
                <code>
            &lt;style lang="scss"&gt;
                @import 'styleKit.scss';
                ...
                .demo {
                    color: $color-font7;
                    font-size: $font-size-l;
                }
            &lt;/style&gt;
                </code>
            </pre>
            <h3> Color </h3>
            <ul class="up-down-list">
                <li v-for="(item, index) in fontColorData" :key="index">
                    <span class="left">
                        <b :class="'color' + (index + 1)">$color-font{{ index + 1 }}</b>
                        <i :class="'bg' + (index + 1)"></i>
                    </span>
                    <span class="right">{{ item.comment }}</span>
                </li>
                <li v-for="(item, index) in tagColorData" :key="index">
                    <span class="left">
                        <b :class="'color-tag-' + item.alias">$color-tag-{{ item.alias }}</b>
                        <i :class="'bg-tag-' + item.alias"></i>
                    </span>
                    <span class="right">{{ item.comment }}</span>
                </li>
                <li v-for="(item, index) in buttonColorData" :key="index">
                    <span class="left">
                        <b :class="'color-button-' + item.alias">$color-button-{{ item.alias }}</b>
                        <i :class="'bg-button-' + item.alias"></i>
                    </span>
                    <span class="right">{{ item.comment }}</span>
                </li>
            </ul>
            <h3> Font </h3>
            <ul class="up-down-list">
                <li v-for="(item, index) in fontSizeData" :key="index">
                    <span class="left">
                        <b :class="'size-font-' + item.alias">$font-size-{{ item.alias }}</b>
                        ({{ item.value }})
                    </span>
                    <span class="right">{{ item.comment }}</span>
                </li>
            </ul>
            <h3> Gap </h3>
            <ul class="up-down-list">
                <li v-for="(item, index) in gapData" :key="index">
                    <span class="left">
                        <b>$gap{{ item.alias }}</b>
                        ({{ item.value }})
                    </span>
                    <span class="right">{{ item.comment }}</span>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import hljs from 'highlight.js'
    export default {
        data: function () {
            return {
                fontColorData: [
                    {
                        comment: '可点击操作文本、文本状态'
                    },
                    {
                        comment: '标题、正文'
                    },
                    {
                        comment: '左侧导航栏文本'
                    },
                    {
                        comment: '表头'
                    },
                    {
                        comment: '提示性文本'
                    },
                    {
                        comment: '输入框提示性文本'
                    },
                    {
                        comment: '特殊状态文本、出错提示'
                    },
                    {
                        comment: '告警性提示、消息告警提示条'
                    },
                    {
                        comment: '深背景色下的前景文字'
                    }
                ],
                tagColorData: [
                    {
                        alias: 'green',
                        comment: '绿色标签'
                    },
                    {
                        alias: 'yellow',
                        comment: '黄色标签'
                    },
                    {
                        alias: 'red',
                        comment: '红色标签'
                    }
                ],
                buttonColorData: [
                    {
                        alias: 'ensure',
                        comment: '确定按钮'
                    },
                    {
                        alias: 'ensure-hover',
                        comment: '确定按钮hover状态'
                    },
                    {
                        alias: 'ensure-disabled',
                        comment: '确定按钮disabled状态'
                    },
                    {
                        alias: 'cancel',
                        comment: '取消按钮'
                    },
                    {
                        alias: 'cancel-hover',
                        comment: '取消按钮hover状态'
                    },
                    {
                        alias: 'cancel-disabled',
                        comment: '取消按钮disabled状态'
                    }
                ],
                fontSizeData: [
                    {
                        alias: 's',
                        value: '12px',
                        comment: '提示性文本、出错提示'
                    },
                    {
                        alias: 'm',
                        value: '14px',
                        comment: '正文、提示性文本'
                    },
                    {
                        alias: 'l',
                        value: '16px',
                        comment: '右侧导航名称、滑出页面标题、弹出框标题'
                    },
                    {
                        alias: 'xl',
                        value: '18px',
                        comment: '头像名称'
                    }
                ],
                gapData: [
                    {
                        alias: '1-top',
                        value: '15px',
                        commont: '上间距'
                    },
                    {
                        alias: '1-right',
                        value: '18px',
                        commont: '右间距'
                    },
                    {
                        alias: '1-bottom',
                        value: '10px',
                        commont: '上间距'
                    },
                    {
                        alias: '1-left',
                        value: '18px',
                        commont: '上间距'
                    }
                ]
            }
        },
        // 组件被挂载的时候执行的方法
        mounted: function () {
            window.setTimeout(function () {
                $('.demo-basic pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 0);
        }
    }
</script>

<style lang="scss">
    @import 'styleKit.scss';
    .up-down-list {
        i {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 2px;
        }
        span {
            &.left {
                display: inline-block;
                width: 250px;
            }
        }
    }

    .bg1 {
        background-color: $color-font1;
    }
    .color1 {
        color: $color-font1;
    }
    .bg2 {
        background-color: $color-font2;
    }
    .color2 {
        color: $color-font2;
    }
    .bg3 {
        background-color: $color-font3;
    }
    .color3 {
        color: $color-font3;
    }
    .bg4 {
        background-color: $color-font4;
    }
    .color4 {
        color: $color-font4;
    }
    .bg5 {
        background-color: $color-font5;
    }
    .color5 {
        color: $color-font5;
    }
    .bg6 {
        background-color: $color-font6;
    }
    .color6 {
        color: $color-font6;
    }
    .bg7 {
        background-color: $color-font7;
    }
    .color7 {
        color: $color-font7;
    }
    .bg8 {
        background-color: $color-font8;
    }
    .color8 {
        color: $color-font8;
    }
    .bg9 {
        background-color: $color-font9;
    }
    .color9 {
        color: $color-font9;
    }

    .bg-tag-green {
        background-color: $color-tag-green;
    }
    .color-tag-green {
        color: $color-tag-green;
    }
    .bg-tag-yellow {
        background-color: $color-tag-yellow;
    }
    .color-tag-yellow {
        color: $color-tag-yellow;
    }
    .bg-tag-red {
        background-color: $color-tag-red;
    }
    .color-tag-red {
        color: $color-tag-red;
    }
    .bg-button-ensure {
        background-color: $color-button-ensure;
    }
    .color-button-ensure {
        color: $color-button-ensure;
    }
    .bg-button-ensure-hover {
        background-color: $color-button-ensure-hover;
    }
    .color-button-ensure-hover {
        color: $color-button-ensure-hover;
    }
    .bg-button-ensure-disabled {
        background-color: $color-button-ensure-disabled;
    }
    .color-button-ensure-disabled {
        color: $color-button-ensure-disabled;
    }
    .bg-button-cancel {
        background-color: $color-button-cancel;
    }
    .color-button-cancel {
        color: $color-button-cancel;
    }
    .bg-button-cancel-hover {
        background-color: $color-button-cancel-hover;
    }
    .color-button-cancel-hover {
        color: $color-button-cancel-hover;
    }
    .bg-button-cancel-disabled {
        background-color: $color-button-cancel-disabled;
    }
    .color-button-cancel-disabled {
        color: $color-button-cancel-disabled;
    }

    .size-font-s {
        font-size: $font-size-s;
    }
    .size-font-m {
        font-size: $font-size-m;
    }
    .size-font-l {
        font-size: $font-size-l;
    }
    .size-font-xl {
        font-size: $font-size-xl;
    }
</style>
